<template>
  <div class="o-a">
    <Page-title :title="title" />
    <div class="assay">
      <div class="row-box h300 f f-ai-c f-jc-c">
        <div class="row-title f f-ai-c f-jc-c" v-html="rowTitle1" />
        <div class="row-chart ml32">
          <Line-chart
            v-if="yList1.length"
            :cid="cId1"
            :x-axis="xList1"
            :data="yList1"
            :type="['line']"
            bar-width="60%"
            :legend="true"
            :leg-top="40"
            :leg-width="100"
            :leg-right="50"
            leg-orient="vertical"
            grid-right="13%"
            grid-bottom="8%"
            :bar-label="[true, false]"
            smooth
            :colors="colors"
            :area-color="['#d9f7fd', '#ecfbfe']"
            dot-colors="#fff"
          />
          <Empty v-else />
        </div>
      </div>
      <div class="row-box h300 f f-ai-c f-jc-c mt20">
        <div class="row-title f f-ai-c f-jc-c" v-html="rowTitle2" />
        <div class="row-chart ml32">
          <Line-chart
            v-if="yList2.length"
            :cid="cId2"
            :x-axis="xList2"
            :data="yList2"
            :type="['line']"
            bar-width="60%"
            :legend="true"
            :leg-top="40"
            :leg-width="100"
            :leg-right="50"
            leg-orient="vertical"
            grid-right="13%"
            grid-top="16%"
            grid-bottom="8%"
            smooth
            :bar-label="[true, false]"
            :colors="colors"
            :area-color="['#d9f7fd', '#ecfbfe']"
            dot-colors="#fff"
          />
          <Empty v-else />
        </div>
      </div>

      <div class="row-box h300 f f-ai-c f-jc-c mt20">
        <div class="row-title f f-ai-c f-jc-c" v-html="rowTitle3" />
        <div class="row-chart ml32">
          <Line-chart
            v-if="yList3.length"
            :cid="cId3"
            :x-axis="xList3"
            :data="yList3"
            :type="['line']"
            bar-width="60%"
            :legend="true"
            :leg-top="40"
            :leg-width="100"
            :leg-right="50"
            leg-orient="vertical"
            grid-right="13%"
            grid-bottom="8%"
            smooth
            :bar-label="[true, false]"
            :colors="colors"
            :area-color="['#d9f7fd', '#ecfbfe']"
            name-location="start"
            dot-colors="#fff"
          />
          <Empty v-else />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 膜厚图表ID
    cId1: {
      type: String,
      default: "",
    },
    // CU2+图表ID
    cId2: {
      type: String,
      default: "",
    },
    // 比重图表ID
    cId3: {
      type: String,
      default: "",
    },
    // 膜厚标题
    rowTitle1: {
      type: String,
      default: "",
    },
    // CU2+标题
    rowTitle2: {
      type: String,
      default: "",
    },
    // 比重标题
    rowTitle3: {
      type: String,
      default: "",
    },
    // 膜厚x轴
    xList1: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 膜厚y轴
    yList1: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 膜厚x轴
    xList2: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 膜厚y轴
    yList2: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 膜厚x轴
    xList3: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 膜厚y轴
    yList3: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      colors: [
        ["#F63F3F", "#F63F3F"],
        ["#FFFE54", "#FFFE54"],
        ["#00D1FF", "#CAF2FF"],
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.o-a {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
}

.assay {
  .row-box {
    .row-title {
      font-family: YouSheiBlack;
      font-size: 20px;
      color: #45f4ff;
      letter-spacing: 2px;
      writing-mode: vertical-lr;
      width: 48px;
      height: 100%;
      background: url("../../../../assets/home/screen-left-title-bg2.png") no-repeat;
      background-size: 100% 100%;
    }
    .row-chart {
      width: 1781px;
      height: 100%;
      background: url("../../../../assets/home/right-title-bg.png");
      background-size: 100% 100%;
    }
  }
}
</style>
